<template>
    <view class="container">
        <uni-card>
            <uni-forms :modelValue="postItem" ref="propItem" :rules="rules" label-width="80px">
                <uni-forms-item label="图纸类型" required name="cat">
                    <view style="display: flex;align-items: center;">
                        <uni-data-checkbox v-model="postItem.cat" :localdata="catlist"></uni-data-checkbox>
                    </view>
                 
                </uni-forms-item>
        
           
                <uni-forms-item label="图纸编号" name="code">
                    <uni-easyinput style="width: 450rpx;" v-model="postItem.code" placeholder="不填自动读取文件名称" />
                </uni-forms-item>
                
                <uni-forms-item label="图纸上传" required name="file">
                    <view class="">
                         只能上传dwg（CAD）文件
                    </view>        
                    <button size="mini" type="primary" @click="handleUploadClick">选择文件(5)</button>
                    
                    <view class="mgb-16 file-wrap" v-for="(item, index) in imglist" :key="index">
                      <view class="btn-click file-line">
                        <view class="file-info">
                          <image src="@/static/icon/DWG.png" mode="aspectFill" class="file-icon" />
                          <text class="file-name">{{ item.name || 'CAD' }}</text>
                        </view>
                        <image src="@/static/icon/DWG.png" mode="aspectFill" class="file-icon"  @click.stop="handleDeleteFile(index)" />
                      </view>
                    </view>
                </uni-forms-item>
              <!--  <view class="btns" style="display: flex;justify-content: end;">
                    <button type="primary" size="mini" @click="submit('buyForm')">提交保存</button>
                </view> -->
            </uni-forms>
        </uni-card>
        
        <xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
    </view>
</template>

<script >
    export default{
        name:"Design",
        props:{
            oid:Number
        },
        data(){
            return{
                catlist:[
                    {text:'总图纸',value:"1"},
                    {text:'激光图',value:"2"},
                    {text:'雕刻图',value:"3"}
                ],
                postItem:{
                    cat:"1",
                    title:'',
                    oid:'',
                    code:''
                },
                rules:{
                    cat: {
                        rules: [{
                            required: true,
                            errorMessage: '请选择图纸类型'
                        }]
                    },
                },
                imglist:[],
                uploadOptions:null
            }
        },
        watch:{},
        onLoad(option) {
            this.postItem.oid = option.oid
 
        },
        onShow(){},
        methods:{
            handleUploadClick() {
                this.uploadOptions = {
                    url:this.$api.postURL+'design/upload',
                    name:'file',
                    header:{
                        'Authorization':uni.getStorageSync('nangtong_login_token')
                    },
                    formData:this.postItem
                }   
                
              // 使用默认配置则不需要传入第二个参数
                this.$refs.XeUpload.upload('file',{
                    count:5,
                    
                });
    
            },
            handleUploadCallback(e){
       
                if(e.data[0].response.code!=200){
                    this.$error(e.data[0].response.message)
                }else{
                    this.$success("上传成功")
                    uni.navigateBack({data:1})
                }
            },
            handleDeleteFile(index) {
              this.imglist.splice(index, 1);
            },
            
            radioChange(e){
                
            },
            submit(ref){
                
            }
         
        }
    }
</script>

<style lang="less" scoped>
</style>